		

<template>
	<view>
		<!-- <u-navbar class="slot-wrap" title="会员中心" :is-back="false" :background="navbgcolor" z-index="10" title-color="#fff">
		</u-navbar> -->
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-40 u-p-t-130" style="position: relative;padding-top: 140rpx;" :style="{background:!userdata?'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))':''}">
			<template v-if="userdata">
				<view class="u-m-r-30">
					<u-avatar :src="userdata.avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-10">{{userdata.username}}</view>
					<view class="u-font-14 u-tips-color">手机号 : {{userdata.mobile}}</view>
					<view class="u-font-14 u-tips-color">昵称 : {{userdata.nickname}}</view>
				</view>
			</template>
			<template v-else>
					<button type="default" style="margin: 50rpx auto;margin-top: 40rpx; background: #18B566;color: #fff;width: 180rpx;" @click="$u.route({url:'/pages/center/login',})">登录</button>
			</template>
			<!-- <view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view> -->
		</view>
		
		<view class="" style="position: relative;">
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="tags" @click="reset" title="修改个人资料"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="u-m-t-20">
				<u-cell-group>
					<!-- <u-cell-item icon="phone" title="修改手机号"></u-cell-item> -->
					<u-cell-item icon="setting" title="重置密码" @click="password.mobile=userdata.mobile;repass=true"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="arrow-leftward" @click="showtip=true" title="退出登录"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;" v-if="!userdata" @click="settype">
				
			</view>
		</view>
		<u-modal v-model="showmodel" v-if="showmodel" @confirm="confirm" width="90%" :title-style="{borderBottom:'1px solid #ccc',padding:'20rpx'}" :confirm-text="'保存编辑'" :title="'个人资料编辑'" show-cancel-button>
			<view class="slot-content1">
					<view class="kuset1">
						<u-form :model="centerdata" label-width="150" ref="uForm" style="display: block;width: 100%;">
							<u-form-item label="用户名" prop="username">
								<u-input v-model="centerdata.username" />
							</u-form-item>
							<u-form-item label="昵称" prop="nickname">
								<u-input v-model="centerdata.nickname" />
							</u-form-item>
						</u-form>
					</view>
					<view style="display: flex;width: 100%;padding:0 30rpx;padding-bottom: 30rpx;">
						<text style="width: 140rpx;font-size: 28rpx;">
							<text style="margin: auto;margin-top: 80rpx;display: block;">
								头像
							</text>
						</text>
						<u-upload ref="uUpload" :max-count="1" :show-progress="false" :file-list="filelist" :show-tips="false" action="" @on-list-change="changes" :before-upload="upload" :auto-upload="false" ></u-upload>
					</view>
			</view>
		</u-modal>
		<u-modal v-model="repass" v-if="repass" @confirm="repasswas" width="90%" :title-style="{borderBottom:'1px solid #ccc',padding:'20rpx'}" :confirm-text="'修改'" :title="'密码修改'" show-cancel-button>
			<view class="slot-content1">
					<view class="kuset1">
						<u-form :model="password" label-width="180" ref="uForm" style="display: block;width: 100%;">
							<u-form-item label="手机号" prop="password">
								<u-input v-model="password.mobile" disabled />
							</u-form-item>
							<u-form-item label="新密码" prop="nickname">
								<u-input v-model="password.password" />
							</u-form-item>
							<u-form-item label="确认密码" prop="nickname">
								<u-input v-model="password.repassword" />
							</u-form-item>
						</u-form>
					</view>
			</view>
		</u-modal>
		<u-modal v-model="showtip" :content="'是否退出登录！'" @confirm="relogin" width="70%"  show-cancel-button></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				showtip:false,
				keyword:'asdad',
				repass:false,
				userdata:false,
				showmodel:false,
				centerdata:{
					username:'',
					nickname:'',
					avatar:'',
				},
				filelist:[],
				password:{
					mobile:'',
					password:'',
					repassword:''
				}
			}
		},
		onLoad() {
			// this.showmodel = false;
		},
		methods: {
			repasswas(){
				
				uni.showLoading({
					title: '密码修改中...',
					mask: true
				})
				uni.request({
				    url: 'http://43.132.175.66/api/user/changepassword', //仅为示例，并非真实接口地址。
					method:'post',
				    data: this.password,
				    header: {
						token:this.userdata.token
				    },
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code != 1){
							this.$refs.uToast.show({
								title: res.data.msg,
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								// icon: false
							})
							return
						}
						this.$refs.uToast.show({
							title: '注意密码已修改，需重新登陆！',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'error', 
							// 如果不需要图标，请设置为false
							// icon: false
						})
						setTimeout(()=>{
							this.relogin()
						},800)
						
				    }
				});
			},
			settype(){
				if(!this.userdata){this.$refs.uToast.show({title: '检测到您未登录，请先登录！',type: 'error', })}
			},
			relogin(){//退出登录
				uni.request({
				    url: 'http://43.132.175.66/api/user/logout', //仅为示例，并非真实接口地址。
					method:'post',
				    data: this.centerdata,
				    header: {
						token:this.userdata.token
				    },
				    success: (res) => {
						if(res.data.code != 1){
							this.$refs.uToast.show({
								title: res.data.msg,
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								// icon: false
							})
							return
						}
						uni.removedata('userdata');
						uni.removedata('selcang');
						this.$u.route({url:'/pages/center/login',})
				    }
				});
			},
			reset(){//
				this.showmodel = true;
				this.setdata();
			},
			confirm(){
				// console.log(this.centerdata)
				uni.showLoading({
					title: '资料更改中...',
					mask: true
				})
				console.log(this.centerdata.avatar,123)
				uni.request({
				    url: 'http://43.132.175.66/api/user/profile', //仅为示例，并非真实接口地址。
					method:'post',
				    data: this.centerdata,
				    header: {
						token:this.userdata.token
				    },
				    success: (res) => {
						uni.hideLoading();
				        // console.log(res.data);
						if(res.data.code != 1){
							this.$refs.uToast.show({
								title: res.data.msg,
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'error', 
								// 如果不需要图标，请设置为false
								// icon: false
							})
							return
						}
						this.$refs.uToast.show({
							title: '修改成功',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
							type: 'success', 
							// 如果不需要图标，请设置为false
							// icon: false
						})
						// let udata = {avatar:res.data.data.avatar,nickname:res.data.data.nickname,username:res.data.data.username};
						this.userdata.avatar = res.data.data.avatar;
						this.userdata.nickname = res.data.data.nickname;
						this.userdata.username = res.data.data.username;
						uni.savedata('userdata',this.userdata,'5d');
				    }
				});
			},
			async changes(index,list){
				if(index.length){
					// console.log(index,'change',index[0].url)
				}
				
				if(index.length){
					// console.log(index[0].url)
					let base = await uni.pathtobase64(index[0].url);
					// console.log(base,'change')
					this.centerdata.avatar = base;
				}
			},
			setdata(){
				if(this.userdata){
					this.centerdata.avatar = this.userdata.avatar;
					this.centerdata.username = this.userdata.username;
					this.centerdata.nickname = this.userdata.nickname;
					this.filelist = [{url:this.centerdata.avatar}];
				}
			},
			upload(index,list){
				// console.log(index,list)
			},
		},
		onShow() {
			this.userdata = uni.getdata('userdata');
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}
.slot-content1{
		min-height: 300rpx;
		.kuset1{
			display: flex;flex-direction: row;
			padding: 30rpx;
			
		}
	}
.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
</style>

